<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8"/>
    <title>EasyWeb主题生成器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/libs/layui/css/layui.css"/>
    <style>
        .layui-form-pane .layui-form-label {
            width: 210px;
        }

        .layui-form-pane .layui-input-block {
            margin-left: 210px;
        }

        .color-demo {
            height: 25px;
            width: 25px;
            border: 1px solid #e6e6e6;
            float: right;
            margin-top: -32px;
            margin-right: 6px;
            background-color: #FBFBFB;
        }

        .login-footer {
            text-align: center;
            line-height: 30px;
            padding-bottom: 20px;
            margin-top: 40px;
        }

        .login-footer span {
            padding: 0 5px
        }

        .login-footer a {
            padding: 0 5px;
        }

        .login-footer a:hover {
            color: #000 !important;
        }
    </style>
</head>

<body>
<div style="margin: 0 auto; max-width: 800px;padding: 20px;">
    <h2 style="text-align: center;margin-bottom: 25px;margin-top: 30px;">EasyWeb主题生成器</h2>
    <div class="layui-form" style="margin-bottom: 15px;text-align: right">
        <div class="layui-inline">
            <label class="layui-form-label">验证颜色：</label>
            <div class="layui-input-inline" id="yxys">
                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" lay-filter="ck-yz" checked>
            </div>
        </div>
    </div>
    <div class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">logo背景颜色</label>
            <div class="layui-input-block">
                <input name="logo" class="layui-input" type="text" value="#002140" lay-verify="required">
                <div class="color-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">logo文字颜色</label>
            <div class="layui-input-block">
                <input name="logo_font" class="layui-input" value="#eee" type="text" lay-verify="required">
                <div class="color-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">header背景颜色</label>
            <div class="layui-input-block">
                <input name="header" class="layui-input" type="text" value="#fff" lay-verify="required">
                <div class="color-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">header字体颜色</label>
            <div class="layui-input-block">
                <input name="header_font" class="layui-input" value="#333" type="text" lay-verify="required">
                <div class="color-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">侧边栏背景颜色</label>
            <div class="layui-input-block">
                <input name="side" class="layui-input" type="text" value="#001529" lay-verify="required">
                <div class="color-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">全局主题颜色(按钮等)</label>
            <div class="layui-input-block">
                <input name="primary" class="layui-input" type="text" value="#009688" lay-verify="required">
                <div class="color-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-sub"><i
                    class="layui-icon layui-icon-engine"></i> 生成
            </button>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" id="btn-down"><i
                    class="layui-icon layui-icon-download-circle"></i> 下载
            </button>
        </div>
    </div>
    <hr>
    <h2 style="margin-top: 20px;margin-bottom: 15px;">生成结果</h2>
    <pre class="layui-code" id="tv-rs" lay-title="theme.css"></pre>

    <hr>

    <h2 style="margin-top: 20px;margin-bottom: 15px;">使用方法</h2>
    <p>将下载好的css放在项目里面，然后打开index.html，引入下载的css即可生效，如果样式有生成的不全的，请联系作者增加：</p>
    <pre class="layui-code" id="tv-jc" lay-title="index.html" lay-encode="true"></pre>

    <div class="login-footer">
        <p>© 2018 <a href="javascript:;" target="_blank">EasyWeb版权所有</a></p>
        <p>
            <span><a href="https://github.com/whvcse/EasyWebPage" target="_blank">前往github</a></span>
            <span><a href="https://gitee.com/whvse/EasyWebPage" target="_blank">前往gitee</a></span>
            <span><a href="https://whvse.gitee.io/easywebpage/docs/" target="_blank">开发文档</a></span>
        </p>
    </div>
</div>

<script type="text/javascript" src="../assets/libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>

<script>
    layui.use(['element', 'form', 'code', 'util', 'layer'], function () {
        var element = layui.element;
        var form = layui.form;
        var util = layui.util;
        var layer = layui.layer;
        var isVer = true;

        $('#tv-jc').text('<link rel="stylesheet" href="assets/css/admin.css"/>\n' +
            '<!-- 引入下载的css，放在admin.css之后，建议放在所有css之后 -->\n' +
            '<link rel="stylesheet" href="assets/css/theme.css"/>');
        layui.code({about: false});
        $('#btn-down').hide();

        var tpl;

        form.on('submit(form-sub)', function (data) {
            for (var key in data.field) {
                var colorValue = data.field[key];
                if (!isVer || /^#[0-9a-fA-F]{3,6}$/.test(colorValue)) {
                    tpl = tpl.replace(new RegExp('{{' + key + '}}', 'gm'), colorValue);
                    layer.msg('生成完成', {icon: 6});
                    $('#btn-down').show();
                } else {
                    layer.msg(key + '颜色值输入错误', {icon: 5});
                    return false;
                }
            }
            $('#tv-rs').text(tpl);
            layui.code({elem: '#tv-rs', about: false});
        });

        layer.load(2);
        $.get('theme.tpl', function (data) {
            tpl = data;
            layer.closeAll('loading');
        });

        $(".layui-form input[type='text']").on('input', function () {
            var colorValue = $(this).val();
            if (!isVer || /^#[0-9a-fA-F]{3,6}$/.test(colorValue)) {
                $(this).parent().find('.color-demo').css('background-color', colorValue);
            } else {
                $(this).parent().find('.color-demo').css('background-color', '#FBFBFB');
            }
        });

        $('#btn-down').click(function () {
            var file = new File([tpl], "theme.css", {type: "text/plain;charset=utf-8"});
            saveAs(file);
        });

        $(".layui-form input[type='text']").trigger('input');

        //固定Bar
        util.fixbar({bgcolor: '#009688'});

        form.on('switch(ck-yz)', function (data) {
            isVer = data.elem.checked;
        });

        $('#yxys').hover(function () {
            layer.tips('目前只校验16进制颜色值，如需rgb颜色，请关闭校验！', this, {tips: [1, '#344058']});
        }, function () {
            layer.closeAll('tips');
        });
    });
</script>
</body>

</html>